<template>
  <div class="login-container table-container">
    <el-table
      class="table_wrap_scroll"
      :data="formattedCourses"
      style="width: 100%"
      border
      row-key="courseId"
    >
      <el-table-column prop="course" label="课程名称" width="180"></el-table-column>
      <el-table-column label="指标要求" width="500">
        <template v-slot="scope">
          <el-table-v2
            class="table_wrap_scroll"
            :data="scope.row.graduationRequirements"
            :width="tableWidth"
            :columns="columns"
            :height="tableHeight"
            :virtualized="true"
            fixed
          >
            <template #cell="scope">
              <div
                v-if="scope.columnIndex == 0"
                :key="
                  scope.rowData.requestId +
                  scope.rowIndex +
                  scope.columnIndex +
                  scope.rowData.requestName
                "
              >
                {{ scope.rowData.requestName }}
              </div>
              <div
                v-if="scope.columnIndex == 1"
                :key="
                  scope.rowData.requestId +
                  scope.rowIndex +
                  scope.columnIndex +
                  scope.rowData.requestName
                "
                class="table_v2_ply"
              >
                <div
                  v-for="item of scope.rowData.points"
                  :key="item.course + item.pointId"
                  @click="showDialog(scope.rowData, item)"
                  class="table_v2_row"
                >
                  <div class="table_v2_cell">
                    <el-tag class="table_v2_tag" type="warning" size="small">{{
                      item.pointName
                    }}</el-tag>
                    <span v-if="!item.weight">请选择</span>
                    <span v-else>
                      <el-tag type="primary" size="small">{{ item.context }}</el-tag>
                      <el-tag type="primary" size="small">{{ item.weight }}</el-tag>
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-v2>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-model="dialogVisible" :title="state.dialogTitle" width="20%">
      <el-form-item label="强度">
        <el-select v-model="state.context">
          <el-option label="A" value="A">
            <el-tag type="success" effect="plain">A</el-tag>
          </el-option>
          <el-option label="B" value="B">
            <el-tag type="warning" effect="plain">B</el-tag>
          </el-option>
          <el-option label="C" value="C">
            <el-tag type="primary" effect="plain">C</el-tag>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权重">
        <el-input v-model="state.weight" placeholder="请输入" clearable></el-input>
      </el-form-item>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="loginIndex">
import { ref, onMounted, reactive, computed } from 'vue'
import JsonData from '../../public/resource/target.json'
const dialogVisible = ref(false)
const scopeRow = ref()
const state = reactive({
  ...JsonData,
  dialogTitle: '',
  context: '',
  weight: '',
  editingData: {}, // 存储正在编辑的数据
  currentCourseIndex: -1, // 存储当前课程的索引
  currentPointIndex: -1 // 存储当前指标点的索引
})

const columns = [
  {
    key: 'requestName',
    dataKey: 'requestName',
    title: '毕业要求',
    width: 100
  },
  {
    key: 'pointDtos',
    dataKey: 'pointDtos',
    title: '指标',
    width: 500
  }
]

const tableWidth = 1000
const tableHeight = 600

const showDialog = (rowData: any, item: any) => {
  scopeRow.value = item
  state.dialogTitle = `${rowData.requestName} - ${item.pointName}`
  state.editingData = { context: item.context, weight: item.weight }
  dialogVisible.value = true
}
const onSubmit = () => {
  scopeRow.value.context = state.context
  scopeRow.value.weight = state.weight
  // 更新源数据
  state.context = ''
  state.weight = ''
  state.currentCourseIndex = -1
  state.currentPointIndex = -1
  dialogVisible.value = false
}
const formattedCourses = computed(() => {
  return state.courses.map((courses) => {
    // 找到与课程相关的毕业要求
    const graduationRequirements = state.graduationRequirements
      .map((req) => ({
        ...req,
        points: req.pointDtos.filter((point: Record<string, any>) =>
          courses.points.some((cp: Record<string, any>) => {
            if (cp.pointId === point.pointId) {
              point.context = cp.context
              point.weight = cp.weight
              point.courseTitle = courses.course
              return true
            }
          })
        )
      }))
      // 过滤掉没有与之相关的指标点的毕业要求
      .filter((req) => req.points.length > 0)

    return {
      ...courses,
      graduationRequirements
    }
  })
})

// 页面加载时
onMounted(() => {})
</script>

<style scoped lang="scss">
.table_wrap_scroll {
  height: 80vh;
  overflow: auto;
}
.table_v2_ply {
  display: flex;
  overflow: auto;
  .table_v2_row {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.table_v2_tag {
  margin-right: 20px;
}
</style>
